<template>
  <div>
    <Nav></Nav>
    <Chart></Chart>
    <div class="bt_contain">
      <p class="bt_title">行业资讯</p>
      <div class="message_content">
        <div
          class="message_index"
          v-for="item in messagelist"
          :key="item.title"
          @click="entryNext(item.id)"
        >
          <div class="message_img">
            <img :src="item.cover" :onerror="defalutLogoUrl" alt="" />
          </div>
          <div class="message_word">
            <p>{{ item.title }}</p>
            <b>发布时间：{{ item.pubdate }}</b>
          </div>
        </div>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.pagenum"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="pagination.pagesize"
        layout=" prev, pager, next, jumper"
        :total="pagination.total"
      >
      </el-pagination>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Nav from "../../components/Nav/Nav.vue";
import Chart from "../../components/Chart/Chart.vue";
import Footer from "../../components/Footer/Footer.vue";

export default {
  components: {
    Nav,
    Chart,
    Footer,
  },
  data() {
    return {
      newlist: [
        {
          id: "0",
          img: require("../../assets/img/9.jpg"),
          name: "东莞吊车租赁公司如何选择吊车出租公司与操作",
          time: "2021年6月1日",
        },
        {
          id: "1",
          img: require("../../assets/img/8.jpg"),
          name: "诚信经营",
          time: "2021年6月1日",
        },
        {
          id: "2",
          img: require("../../assets/img/7.jpg"),
          name: "互惠互利",
          time: "2021年6月1日",
        },
        {
          id: "3",
          img: require("../../assets/img/5.jpg"),
          name: "东莞吊车租赁公司如何选择吊车出租公司与操作",
          time: "2021年6月1日",
        },
      ],
      messageInfo: {
        total: 5,
        list: "",
      },
      pagination: {
        pagenum: 1,
        pagesize: 8,
        total: 5,
      },
      messagelist: [],
      // 错误默认显示
      defalutLogoUrl: 'this.src="' + require("../../assets/img/6.jpg") + '"',
    };
  },
  methods: {
    async getMessageList() {
      const res = await this.http.get("/message/selectPage", this.pagination);
      this.messagelist = res.list;
      this.pagination.total = res.total;
      console.log(res);
    },
    handleSizeChange(newSize) {
      this.pagination.pagesize = newSize;
      this.getMessageList();
    },
    handleCurrentChange(newPage) {
      this.pagination.pagenum = newPage;
      this.getMessageList();
    },
    entryNext(id) {
      console.log(id);
      this.$router.push({
        path: "/next",
        query: { id: id },
      });
    },
  },
  created() {
    this.getMessageList();
  },
};
</script>

<style scoped>
.bt_contain {
  width: 100%;
  height: 1000px;
  /* background: pink; */
  margin: 0;
  text-align: center;
}
.bt_title {
  margin: 0;
  position: relative;
  top: 30px;
  padding: 0 20px;
  font-size: 18px;
  font-weight: 400px;
  display: inline-block;
  border-left: 5px solid rgba(5, 160, 69, 1);
}
.message_content {
  width: 800px;
  height: 850px;
  /* background: pink; */
  margin: 40px auto;
  border: 2px solid #333;
}
.message_index {
  width: 350px;
  height: 150px;
  margin-left: 20px;
  margin-right: 30px;
  margin-top: 40px;
  /* background: pink; */
  float: left;
  border-bottom: 2px solid #333;
}
.message_img {
  position: absolute;
  width: 160px;
  height: 100px;
  margin-top: 25px;
  background: #ededed;
}
.message_img img {
  width: 100%;
  height: 100%;
}
.message_word {
  display: block;
  /* font-size: 10px; */
  position: absolute;
  margin-left: 168px;
  text-align: left;
}
.message_word p {
  display: block;
  margin-top: 30px;
  font-size: 11x;
  /* background: blue; */
  width: 176px;
  height: 70px;
}
.message_word b {
  font-size: 8px;
  font-weight: 400;
  /* color: #aca5a5; */
  position: relative;
  bottom: 20px;
  padding: 0;
}

/*  */
</style>
